import { useEffect, useState, Fragment } from 'react'

import { Button, Popconfirm, message, Modal, Typography, Input, Dropdown } from 'antd';
import { CloseCircleOutlined, EditOutlined } from '@ant-design/icons';

import PubSub from 'pubsub-js'
import { delProductItem, modifyProductItem } from '../../constant/PubSubKey'

import styles from './index.module.css'

//货物名称数据
import { productNameItems } from '../../constant/productNameData'
//单位数据
import { productUnitItems } from '../../constant/productUnitData'

function OperationBtn(props) {
    const { Text } = Typography;
    const [messageApi, contextHolder] = message.useMessage();
    //父控件传过来的值
    const { productData } = props;
    //弹出框
    const [isModalOpen, setIsModalOpen] = useState(false);
    //商品信息
    const [productName, setProductName] = useState(() => {
        return productData.productName;
    })
    const [productUnit, setProductUnit] = useState(() => {
        return productData.productUnit;
    })
    const [productQuantity, setProductQuantity] = useState(() => {
        return productData.productQuantity;
    })
    const [productPrice, setProductPrice] = useState(() => {
        return productData.productPrice;
    })
    const [productRemarks, setProductRemarks] = useState(() => {
        return productData.productRemarks;
    })

    //[]空数组相当于componentDidMount
    useEffect(() => {
        return () => {

        }
    }, []);

    // 确认删除
    const confirm = e => {
        messageApi.success('货物已删除');
        setTimeout(() => {
            PubSub.publish(delProductItem, { id: productData.id });
        }, 500);
    };

    // 取消删除
    const cancel = e => {

    };

    function onChangeProductName(val) {
        let productName = val.target.value
        setProductName(productName);
    }

    function onChangeProductUnit(val) {
        let productUnit = val.target.value
        setProductUnit(productUnit);
    }

    function onChangeProductQuantity(val) {
        let productQuantity = val.target.value
        setProductQuantity(productQuantity);
    }

    function onChangeProductPrice(val) {
        let productPrice = val.target.value
        setProductPrice(productPrice);
    }

    function onChangeProductRemarks(val) {
        let productRemarks = val.target.value
        setProductRemarks(productRemarks);
    }

    const handleOk = () => {
        if (productName.length === 0) {
            messageApi.error('请输入货物名称');
            return
        }
        if (productUnit.length === 0) {
            messageApi.error('请输入单位');
            return
        }
        if (productQuantity.length === 0) {
            messageApi.error('请输入数量');
            return
        }
        if (productPrice.length === 0) {
            messageApi.error('请输入单价');
            return
        }
        messageApi.success('货物已修改');
        setIsModalOpen(false);
        setTimeout(() => {
            PubSub.publish(modifyProductItem, { productName, productUnit, productQuantity, productPrice, productRemarks, id: productData.id });
        }, 500);
    };

    const handleCancel = () => {
        //关闭弹框
        setIsModalOpen(false);
    };

    const showModalDialog = () => {
        setIsModalOpen(true);
    };

    const clickProductName = ({ key }) => {
        const productName = productNameItems[key].name
        setProductName(productName)
    };

    const clickProductUnit = ({ key }) => {
        const productUnit = productUnitItems[key].name
        setProductUnit(productUnit)
    }

    return (
        <Fragment>
            <Modal
                width={"30%"}
                title="修改货物信息"
                open={isModalOpen}
                okText={'修改货物'}
                onOk={handleOk}
                onCancel={handleCancel}>
                <div className={styles.product_info_box}>
                    <div className={styles.product_item_box}>
                        <Text className={styles.product_item_title} strong>货物名称：</Text>
                        <Dropdown trigger={['click']} menu={{ items: productNameItems, onClick: clickProductName }}>
                            <Input onPressEnter={handleOk} onChange={onChangeProductName} value={productName}
                                className={styles.inp_product_info} placeholder='货物名称' allowClear={true} size="large" />
                        </Dropdown>
                    </div>

                    <div className={styles.product_item_box}>
                        <Text className={styles.product_item_title} strong>单位：</Text>
                        <Dropdown trigger={['click']} menu={{ items: productUnitItems, onClick: clickProductUnit }}>
                            <Input onPressEnter={handleOk} onChange={onChangeProductUnit} value={productUnit}
                                className={styles.inp_unit} placeholder='单位' allowClear={true} size="large" />
                        </Dropdown>
                    </div>

                    <div className={styles.product_item_box}>
                        <Text className={styles.product_item_title} strong>数量：</Text>
                        <Input onPressEnter={handleOk} type={'number'} onChange={onChangeProductQuantity}
                            value={productQuantity} className={styles.inp_quantity} placeholder='数量' allowClear={true} size="large" />
                    </div>

                    <div className={styles.product_item_box}>
                        <Text className={styles.product_item_title} strong>单价：</Text>
                        <Input onPressEnter={handleOk} type={'number'} onChange={onChangeProductPrice}
                            value={productPrice} className={styles.inp_price} placeholder='单价(元)' allowClear={true} size="large" />
                    </div>

                    <div className={styles.product_item_box}>
                        <Text className={styles.product_item_title} strong>备注：</Text>
                        <Input onPressEnter={handleOk} onChange={onChangeProductRemarks}
                            value={productRemarks} className={styles.inp_remarks} placeholder='备注' allowClear={true} size="large" />
                    </div>
                </div>
            </Modal >
            {contextHolder}
            <Button onClick={showModalDialog} icon={<EditOutlined />} color="cyan" variant="solid" ></Button>
            <Popconfirm
                title="删除货物"
                description={'是否确认删除货物？'}
                onConfirm={confirm}
                onCancel={cancel}
                okText="确认"
                cancelText="取消"
            >
                <Button className={styles.btn_delete} icon={<CloseCircleOutlined />} type="primary" danger></Button>
            </Popconfirm>
        </Fragment >
    )
}


export default OperationBtn

